import { Route } from "react-router-dom";
import { About } from "components/About";
import { Home } from "components/Home";
import { Menu } from "./components/Menu";
import { Student } from "components/Student";

function App() {
  return (
    <div className="App">
      <Menu></Menu>
      {/* 
        Route中的属性：
          path  映射的url地址
          component 要挂载的组件
          exact 路径是否完整匹配
      */}
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      {/* <Route path="/student/:id" component={Student}/> */}

      {/* 
        使用render替换component
          render使用的是一个回调函数，使用JSX的形式返回一个组件
      */}
      <Route path="/student/:id" render={(routeProps) => {
        return <Student {...routeProps}></Student>
      }}/>
    </div>
  );
}

export default App;
